<!DOCTYPE html>
<html>
<head>
    <title>Fig. 2.10 Redraw</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ddd;
            background-color: white;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="480"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style and Helper Functions ---
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 2.5;
    ctx.font = 'bold 20px sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    function drawArrow(x1, y1, x2, y2, headlen = 10) {
        const dx = x2 - x1;
        const dy = y2 - y1;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // --- Main Drawing Logic ---

    // 1. Draw the top view: Circle with radius 'a'
    const centerX = 250;
    const circleY = 100;
    const radius = 60;

    // Circle outline
    ctx.beginPath();
    ctx.arc(centerX, circleY, radius, 0, 2 * Math.PI);
    ctx.stroke();

    // Center dot
    ctx.beginPath();
    ctx.arc(centerX, circleY, 3, 0, 2 * Math.PI);
    ctx.fill();

    // Radius line and label 'a'
    const radiusAngle = Math.PI / 7;
    const radiusEndX = centerX + radius * Math.cos(radiusAngle);
    const radiusEndY = circleY - radius * Math.sin(radiusAngle);
    ctx.beginPath();
    ctx.moveTo(centerX, circleY);
    ctx.lineTo(radiusEndX, radiusEndY);
    ctx.stroke();
    ctx.fillText('a', centerX + 35, circleY - 25);

    // 2. Draw the side view: Parallel-plate capacitor
    const capCenterY = 270;
    const d = 50; // separation distance
    const plateWidth = 140;

    const topPlateY = capCenterY - d / 2;
    const bottomPlateY = capCenterY + d / 2;
    const plateStartX = centerX - plateWidth / 2;
    const plateEndX = centerX + plateWidth / 2;

    // Top Plate
    ctx.beginPath();
    ctx.moveTo(plateStartX, topPlateY);
    ctx.lineTo(plateEndX, topPlateY);
    ctx.stroke();
    
    // Bottom Plate
    ctx.beginPath();
    ctx.moveTo(plateStartX, bottomPlateY);
    ctx.lineTo(plateEndX, bottomPlateY);
    ctx.stroke();
    
    // The short vertical lines on the plates in the original are stylistic.
    // We add them to better match the source image's hand-drawn style.
    const tickLen = 15;
    ctx.beginPath();
    // Ticks on top plate
    ctx.moveTo(180, topPlateY);
    ctx.lineTo(180, topPlateY - tickLen);
    ctx.moveTo(310, topPlateY);
    ctx.lineTo(310, topPlateY - tickLen);
    // Ticks on bottom plate
    ctx.moveTo(180, bottomPlateY);
    ctx.lineTo(180, bottomPlateY + tickLen);
    ctx.moveTo(centerX, bottomPlateY);
    ctx.lineTo(centerX, bottomPlateY + tickLen);
    ctx.stroke();


    // 3. Draw Labels and Vectors
    
    // Distance 'd' indicator
    const dIndicatorX = 140;
    ctx.beginPath();
    ctx.moveTo(dIndicatorX, topPlateY);
    ctx.lineTo(dIndicatorX, bottomPlateY);
    ctx.stroke();
    // Arrowheads for dimension line
    drawArrow(dIndicatorX, bottomPlateY, dIndicatorX, capCenterY + 4, 8);
    drawArrow(dIndicatorX, topPlateY, dIndicatorX, capCenterY - 4, 8);
    ctx.fillText('d', dIndicatorX - 20, capCenterY);

    // Region labels (I) and (II)
    const regionLabelX = 180;
    ctx.fillText('(I)', regionLabelX, capCenterY);
    ctx.fillText('(II)', regionLabelX, topPlateY - 25);
    
    // Electric field 'E' and normal vector 'n'
    const vectorX = 310;
    
    // Vector E (downward)
    drawArrow(vectorX, topPlateY + 5, vectorX, bottomPlateY - 5);
    ctx.fillText('E', vectorX + 20, capCenterY + 5);
    
    // Vector n (upward)
    drawArrow(vectorX, topPlateY - 5, vectorX, topPlateY - 35);
    ctx.fillText('n', vectorX + 20, topPlateY - 20);

    // 4. Draw z-axis
    const zAxisX = 400;
    drawArrow(zAxisX, 320, zAxisX, 220);
    ctx.fillText('z', zAxisX, 210);

    // 5. Draw Figure Caption
    ctx.font = '20px Times New Roman';
    ctx.fillText('Fig. 2.10', centerX, 440);

</script>
</body>
</html>